<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>我的积分 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #2c6ecb;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 积分总览卡片 */
    .points-overview {
      background: linear-gradient(135deg, #2c6ecb, #4080ff);
      color: white;
      border-radius: 12px;
      padding: 20px 15px;
      margin: 15px;
      box-shadow: 0 4px 12px rgba(44, 110, 203, 0.2);
    }
    
    .overview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .overview-title {
      font-size: 16px;
      opacity: 0.9;
    }
    
    .points-balance {
      text-align: center;
      margin-bottom: 10px;
    }
    
    .points-number {
      font-size: 36px;
      font-weight: 700;
      margin: 10px 0;
    }
    
    .points-expiry {
      font-size: 13px;
      opacity: 0.9;
      text-align: center;
    }
    
    .points-actions {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    
    .points-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      border: none;
      color: #2c6ecb;
      background-color: rgba(255, 255, 255, 0.9);
      font-size: 15px;
      font-weight: 500;
    }
    
    /* 积分导航 */
    .points-nav {
      display: flex;
      background-color: white;
      margin: 0 15px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .nav-tab {
      flex: 1;
      padding: 15px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      border-bottom: 2px solid transparent;
    }
    
    .nav-tab.active {
      color: #2c6ecb;
      border-bottom-color: #2c6ecb;
    }
    
    /* 积分任务区 */
    .section-title {
      font-size: 16px;
      font-weight: 600;
      padding: 15px 15px 5px;
      color: #333;
    }
    
    .tasks-container {
      margin: 10px 15px;
    }
    
    .task-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .task-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .task-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
    }
    
    .icon-daily {
      background-color: #52c41a;
    }
    
    .icon-share {
      background-color: #faad14;
    }
    
    .icon-comment {
      background-color: #1890ff;
    }
    
    .icon-profile {
      background-color: #722ed1;
    }
    
    .task-details {
      flex: 1;
    }
    
    .task-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 3px;
    }
    
    .task-desc {
      font-size: 12px;
      color: #999;
    }
    
    .task-action {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
    }
    
    .btn-complete {
      background-color: #f5f5f5;
      color: #999;
      border: none;
    }
    
    .btn-get {
      background-color: #e8f4fd;
      color: #2c6ecb;
      border: none;
    }
    
    /* 积分记录 */
    .records-container {
      background-color: white;
      margin: 10px 15px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    
    .record-month {
      padding: 12px 15px;
      font-size: 14px;
      color: #666;
      background-color: #f9f9f9;
    }
    
    .record-item {
      padding: 12px 15px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
    }
    
    .record-item:last-child {
      border-bottom: none;
    }
    
    .record-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .record-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    
    .record-earn {
      background-color: #52c41a;
    }
    
    .record-spend {
      background-color: #ff4d4f;
    }
    
    .record-expire {
      background-color: #faad14;
    }
    
    .record-details {
      flex: 1;
    }
    
    .record-title {
      font-size: 15px;
      margin-bottom: 2px;
    }
    
    .record-time {
      font-size: 12px;
      color: #999;
    }
    
    .record-points {
      font-weight: 500;
    }
    
    .points-positive {
      color: #52c41a;
    }
    
    .points-negative {
      color: #ff4d4f;
    }
    
    /* 积分兑换 */
    .rewards-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 10px 15px;
    }
    
    .reward-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .reward-image {
      height: 100px;
      position: relative;
      overflow: hidden;
    }
    
    .reward-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
    
    .reward-card:hover .reward-image img {
      transform: scale(1.05);
    }
    
    .reward-points {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: rgba(0,0,0,0.6);
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 12px;
    }
    
    .reward-info {
      padding: 10px;
    }
    
    .reward-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .reward-stock {
      font-size: 12px;
      color: #999;
      margin-bottom: 8px;
    }
    
    .reward-action {
      width: 100%;
      padding: 5px 0;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      background-color: #e8f4fd;
      color: #2c6ecb;
      border: none;
    }
    
    .reward-action.disabled {
      background-color: #f5f5f5;
      color: #999;
    }
    
    /* 积分等级 */
    .level-container {
      background-color: white;
      margin: 10px 15px;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .level-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .level-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .level-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #e8f4fd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2c6ecb;
      font-size: 24px;
      font-weight: 700;
    }
    
    .level-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .level-desc {
      font-size: 13px;
      color: #666;
    }
    
    .level-progress-container {
      margin: 15px 0;
    }
    
    .progress-info {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      margin-bottom: 5px;
    }
    
    .level-progress {
      height: 8px;
      background-color: #f5f5f5;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .progress-bar {
      height: 100%;
      background-color: #2c6ecb;
      border-radius: 4px;
    }
    
    .level-benefits {
      margin-top: 15px;
    }
    
    .benefit-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    .benefit-icon {
      color: #2c6ecb;
    }
    
    /* 内容区域切换 */
    .content-section {
      display: none;
    }
    
    .content-section.active {
      display: block;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 40px 20px;
      text-align: center;
      color: #999;
    }
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 15px;
      color: #ddd;
    }
    
    .empty-text {
      font-size: 15px;
      margin-bottom: 20px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item.active {
      color: #2c6ecb;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">我的积分</h1>
    <div class="text-white">
      <i class="fa fa-question-circle-o"></i>
    </div>
  </div>
  
  <!-- 积分总览卡片 -->
  <div class="points-overview">
    <div class="overview-header">
      <div class="overview-title">当前可用积分</div>
      <div><i class="fa fa-history"></i></div>
    </div>
    <div class="points-balance">
      <div>总积分</div>
      <div class="points-number">2,580</div>
    </div>
    <div class="points-expiry">
      温馨提示：1,200积分将于2023年12月31日到期
    </div>
    <div class="points-actions">
      <button class="points-btn">积分兑换</button>
      <button class="points-btn">积分规则</button>
    </div>
  </div>
  
  <!-- 积分导航 -->
  <div class="points-nav">
    <div class="nav-tab active" data-tab="tasks">每日任务</div>
    <div class="nav-tab" data-tab="records">积分记录</div>
    <div class="nav-tab" data-tab="rewards">积分兑换</div>
    <div class="nav-tab" data-tab="level">会员等级</div>
  </div>
  
  <!-- 每日任务区域 -->
  <div class="content-section active" id="tasks">
    <h3 class="section-title">日常任务</h3>
    <div class="tasks-container">
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-daily">
            <i class="fa fa-sign-in"></i>
          </div>
          <div class="task-details">
            <div class="task-title">每日签到</div>
            <div class="task-desc">连续签到7天可获得额外积分</div>
          </div>
        </div>
        <button class="task-action btn-get">+20积分</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-share">
            <i class="fa fa-share-alt"></i>
          </div>
          <div class="task-details">
            <div class="task-title">分享内容</div>
            <div class="task-desc">成功分享1次内容到社交平台</div>
          </div>
        </div>
        <button class="task-action btn-get">+30积分</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-comment">
            <i class="fa fa-comment"></i>
          </div>
          <div class="task-details">
            <div class="task-title">发表评论</div>
            <div class="task-desc">发表3条有效评论</div>
          </div>
        </div>
        <button class="task-action btn-complete">已完成</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-profile">
            <i class="fa fa-user"></i>
          </div>
          <div class="task-details">
            <div class="task-title">完善个人资料</div>
            <div class="task-desc">完成个人信息填写和认证</div>
          </div>
        </div>
        <button class="task-action btn-get">+100积分</button>
      </div>
    </div>
    
    <h3 class="section-title">新手任务</h3>
    <div class="tasks-container">
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-profile" style="background-color: #ff7a45;">
            <i class="fa fa-user-plus"></i>
          </div>
          <div class="task-details">
            <div class="task-title">关注5位用户</div>
            <div class="task-desc">关注后可获取更多感兴趣的内容</div>
          </div>
        </div>
        <button class="task-action btn-get">+50积分</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-comment" style="background-color: #2db7f5;">
            <i class="fa fa-pencil"></i>
          </div>
          <div class="task-details">
            <div class="task-title">发布首条动态</div>
            <div class="task-desc">分享你的生活或观点</div>
          </div>
        </div>
        <button class="task-action btn-get">+80积分</button>
      </div>
    </div>
  </div>
  
  <!-- 积分记录区域 -->
  <div class="content-section" id="records">
    <div class="records-container">
      <div class="record-month">2023年10月</div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-earn">
            <i class="fa fa-sign-in"></i>
          </div>
          <div class="record-details">
            <div class="record-title">每日签到</div>
            <div class="record-time">今天 08:30</div>
          </div>
        </div>
        <div class="record-points points-positive">+20</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-earn">
            <i class="fa fa-comment"></i>
          </div>
          <div class="record-details">
            <div class="record-title">发表评论奖励</div>
            <div class="record-time">昨天 15:42</div>
          </div>
        </div>
        <div class="record-points points-positive">+30</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-spend">
            <i class="fa fa-shopping-cart"></i>
          </div>
          <div class="record-details">
            <div class="record-title">兑换优惠券</div>
            <div class="record-time">2023-10-20 19:15</div>
          </div>
        </div>
        <div class="record-points points-negative">-500</div>
      </div>
      
      <div class="record-month">2023年9月</div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-earn">
            <i class="fa fa-share-alt"></i>
          </div>
          <div class="record-details">
            <div class="record-title">分享内容奖励</div>
            <div class="record-time">2023-09-28 11:20</div>
          </div>
        </div>
        <div class="record-points points-positive">+30</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-expire">
            <i class="fa fa-clock-o"></i>
          </div>
          <div class="record-details">
            <div class="record-title">积分过期</div>
            <div class="record-time">2023-09-01 00:00</div>
          </div>
        </div>
        <div class="record-points points-negative">-150</div>
      </div>
    </div>
  </div>
  
  <!-- 积分兑换区域 -->
  <div class="content-section" id="rewards">
    <div class="rewards-container">
      <div class="reward-card">
        <div class="reward-image">
          <img src="https://picsum.photos/400/300?random=50" alt="优惠券">
          <div class="reward-points">500积分</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">咖啡代金券20元</div>
          <div class="reward-stock">剩余: 128</div>
          <button class="reward-action">立即兑换</button>
        </div>
      </div>
      
      <div class="reward-card">
        <div class="reward-image">
          <img src="https://picsum.photos/400/300?random=51" alt="电影票">
          <div class="reward-points">1000积分</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">通用电影票一张</div>
          <div class="reward-stock">剩余: 45</div>
          <button class="reward-action">立即兑换</button>
        </div>
      </div>
      
      <div class="reward-card">
        <div class="reward-image">
          <img src="https://picsum.photos/400/300?random=52" alt="会员">
          <div class="reward-points">2000积分</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">月度会员体验卡</div>
          <div class="reward-stock">剩余: 76</div>
          <button class="reward-action">立即兑换</button>
        </div>
      </div>
      
      <div class="reward-card">
        <div class="reward-image">
          <img src="https://picsum.photos/400/300?random=53" alt="商品">
          <div class="reward-points">5000积分</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">定制版无线耳机</div>
          <div class="reward-stock">剩余: 0</div>
          <button class="reward-action disabled">已抢完</button>
        </div>
      </div>
    </div>
    
    <div class="load-more text-center py-4">
      <button class="btn btn-light px-4 py-2 rounded-pill">
        <i class="fa fa-refresh mr-1"></i> 加载更多
      </button>
    </div>
  </div>
  
  <!-- 会员等级区域 -->
  <div class="content-section" id="level">
    <div class="level-container">
      <div class="level-header">
        <div class="level-info">
          <div class="level-icon">3</div>
          <div>
            <div class="level-title">黄金会员</div>
            <div class="level-desc">距离下一等级还差420积分</div>
          </div>
        </div>
        <div>积分: 2,580</div>
      </div>
      
      <div class="level-progress-container">
        <div class="progress-info">
          <div>黄金会员 (2000-3000分)</div>
          <div>2580/3000</div>
        </div>
        <div class="level-progress">
          <div class="progress-bar" style="width: 86%"></div>
        </div>
      </div>
      
      <div class="level-benefits">
        <div class="benefit-item">
          <div class="benefit-icon"><i class="fa fa-gift"></i></div>
          <div>每月可领取2张5元无门槛优惠券</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon"><i class="fa fa-percent"></i></div>
          <div>积分兑换商品享受9折优惠</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon"><i class="fa fa-trophy"></i></div>
          <div>参与专属会员活动资格</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon"><i class="fa fa-star"></i></div>
          <div>生日当月可领取双倍积分</div>
        </div>
      </div>
    </div>
    
    <h3 class="section-title">会员等级说明</h3>
    <div class="level-container">
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon" style="background-color: #ddd; color: #999;">1</div>
          <div class="record-details">
            <div class="record-title">青铜会员</div>
            <div class="record-time">0-500积分</div>
          </div>
        </div>
        <div>基础权益</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon" style="background-color: #c0c0c0; color: white;">2</div>
          <div class="record-details">
            <div class="record-title">白银会员</div>
            <div class="record-time">501-2000积分</div>
          </div>
        </div>
        <div>进阶权益</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon" style="background-color: #ffd700; color: white;">3</div>
          <div class="record-details">
            <div class="record-title">黄金会员</div>
            <div class="record-time">2001-3000积分</div>
          </div>
        </div>
        <div>高级权益</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon" style="background-color: #e5e4e2; color: white;">4</div>
          <div class="record-details">
            <div class="record-title">铂金会员</div>
            <div class="record-time">3001-5000积分</div>
          </div>
        </div>
        <div>尊享权益</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon" style="background-color: #00ced1; color: white;">5</div>
          <div class="record-details">
            <div class="record-title">钻石会员</div>
            <div class="record-time">5001积分以上</div>
          </div>
        </div>
        <div>专属权益</div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-trophy nav-icon"></i>
      <span>积分</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 导航切换功能
    const navTabs = document.querySelectorAll('.nav-tab');
    const contentSections = document.querySelectorAll('.content-section');
    
    navTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        navTabs.forEach(t => t.classList.remove('active'));
        contentSections.forEach(s => s.classList.remove('active'));
        
        // 添加当前激活状态
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 任务按钮功能
    const taskButtons = document.querySelectorAll('.task-action.btn-get');
    taskButtons.forEach(button => {
      button.addEventListener('click', function() {
        const taskTitle = this.closest('.task-card').querySelector('.task-title').textContent;
        const pointsText = this.textContent;
        const points = pointsText.match(/\d+/)[0];
        
        // 更改按钮状态
        this.textContent = '已完成';
        this.classList.remove('btn-get');
        this.classList.add('btn-complete');
        
        // 更新总积分
        updatePoints(points);
        
        // 显示提示
        alert(`恭喜！完成【${taskTitle}】获得${points}积分`);
      });
    });
    
    // 兑换按钮功能
    const rewardButtons = document.querySelectorAll('.reward-action:not(.disabled)');
    rewardButtons.forEach(button => {
      button.addEventListener('click', function() {
        const rewardTitle = this.closest('.reward-card').querySelector('.reward-title').textContent;
        const pointsText = this.closest('.reward-card').querySelector('.reward-points').textContent;
        const points = pointsText.match(/\d+/)[0];
        
        // 检查积分是否足够
        const currentPoints = parseInt(document.querySelector('.points-number').textContent.replace(',', ''));
        if (currentPoints >= parseInt(points)) {
          // 更新按钮状态
          this.textContent = '已兑换';
          this.classList.add('disabled');
          
          // 更新总积分
          updatePoints(-points);
          
          // 显示提示
          alert(`成功兑换【${rewardTitle}】，消耗${points}积分`);
        } else {
          alert('积分不足，无法兑换');
        }
      });
    });
    
    // 更新积分数量
    function updatePoints(change) {
      const pointsElement = document.querySelector('.points-number');
      let currentPoints = parseInt(pointsElement.textContent.replace(',', ''));
      currentPoints += parseInt(change);
      
      // 添加千位分隔符
      pointsElement.textContent = currentPoints.toLocaleString();
    }
    
    // 加载更多功能
    document.querySelector('.load-more btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-refresh mr-1"></i> 加载更多';
        alert('已加载全部兑换商品');
      }, 1500);
    });
  </script>
</body>
</html>
